/**
 * 系统管理 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">诊所管理</el-breadcrumb-item>
      <el-breadcrumb-item>医生管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form class="elForm" style="width: 500px;background-color: #FFF;padding: 20px;margin-top: 20px;margin-right: 20px;box-shadow: 0px 0px 10px rgba(0,0,0,.2);border-radius: 5px;float: left">
      <span style="padding-bottom: 10px;display: block">编辑医生信息（包括添加头像），请先选择医生姓名</span>
      <el-form-item >
        <el-select style="font-size: 22px" v-model="updateForm.id" @change="selectUpdateForm" placeholder="请选择医生">
          <el-option
            v-for="item in doctorList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名：">
        <el-input size="medium" v-model="updateForm.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input size="medium" v-model="updateForm.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="性别：">
        <el-radio v-model="updateForm.sex" label="男">男</el-radio>
        <el-radio v-model="updateForm.sex" label="女">女</el-radio>
      </el-form-item>
      <el-form-item label="年龄：">
        <el-input size="medium" v-model="updateForm.age" placeholder="请输入年龄"></el-input>
      </el-form-item>
      <el-form-item label="科室：">
        <el-input size="medium" v-model="updateForm.department" placeholder="请输入医生所在科室"></el-input>
      </el-form-item>
      <el-form-item label="开诊时间：">
        <el-input size="medium" v-model="updateForm.openingtime" placeholder="请输入医生开诊时间"></el-input>
      </el-form-item>
      <el-form-item label="头像：">
        <el-upload
          class="avatar-uploader"
          action="https://mp.wwtsz.com:8812/manager/doctor/upload"
          :show-file-list="false"
          name="picture"
          :data="{doctorId: updateForm.id}"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="updateForm.headimg" :src="updateForm.headimg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="介绍：">
        <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" v-model="updateForm.introduce" placeholder="请输入医生介绍"></el-input>
      </el-form-item>
      <el-form-item label="擅长主治：">
        <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" v-model="updateForm.goodat" placeholder="请输入医生擅长主治"></el-input>
      </el-form-item>
      <el-form-item label="温馨提示：">
        <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" v-model="updateForm.reminder" placeholder="请输入温馨提示"></el-input>
      </el-form-item>
      <el-form-item label="患者须知：">
        <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" v-model="updateForm.notice" placeholder="请输入患者须知"></el-input>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" v-model="updateForm.remarks" placeholder="备注"></el-input>
      </el-form-item>
      <el-button size="medium" type="primary" :loading="loading" class="title" @click="updateFormBtn">保存</el-button>
    </el-form>
    <el-button type="success" @click="add" style="margin-top: 20px;margin-bottom: 10px">新增</el-button>
    <br>
    <el-button type="danger" @click="del">删除</el-button>
    <!-- 新增医生窗口 -->
    <el-dialog :title="addFormTitle" :visible.sync="addFormVisible" width="50%" @click="closeDialog">
      <el-form label-width="100px" :model="addForm" ref="editForm">
        <el-form-item label="姓名：">
          <el-input size="medium" v-model="addForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input size="medium" v-model="addForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="addForm.sex" label="男">男</el-radio>
          <el-radio v-model="addForm.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄：">
          <el-input size="medium" v-model="addForm.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="科室：">
          <el-input size="medium" v-model="addForm.department" placeholder="请输入医生所在科室"></el-input>
        </el-form-item>
        <el-form-item label="开诊时间：">
          <el-input size="medium" v-model="addForm.openingtime" placeholder="请输入医生开诊时间"></el-input>
        </el-form-item>
<!--        <el-form-item label="头像：">-->
<!--          <el-upload-->
<!--            class="avatar-uploader"-->
<!--            action="https://mp.wwtsz.com:8812/uploadEditor"-->
<!--            :show-file-list="false"-->
<!--            name="picture"-->
<!--            :data="{doctorId: updateForm.doctorId}"-->
<!--            :on-success="handleAvatarSuccess"-->
<!--            :before-upload="beforeAvatarUpload">-->
<!--            <img v-if="addForm.headimg" :src="addForm.headimg" class="avatar">-->
<!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--          </el-upload>-->
<!--        </el-form-item>-->
        <el-form-item label="介绍：">
          <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" size="medium" v-model="addForm.introduce" placeholder="请输入医生介绍"></el-input>
        </el-form-item>
        <el-form-item label="擅长主治：">
          <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" size="medium" v-model="addForm.goodat" placeholder="请输入医生擅长主治"></el-input>
        </el-form-item>
        <el-form-item label="温馨提示：">
          <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" size="medium" v-model="addForm.reminder" placeholder="请输入温馨提示"></el-input>
        </el-form-item>
        <el-form-item label="患者须知：">
          <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" size="medium" v-model="addForm.notice" placeholder="请输入患者须知"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" :autosize="{minRows:2,maxRows:8}" size="medium" v-model="addForm.remarks" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="closeDialog">取消</el-button>
        <el-button size="medium" type="primary" :loading="loading" class="title" @click="addFormBtn()">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
import {addDoctor, allDoctor, delDoctor, updateDoctor} from "../../api";
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      updateForm: {},
      doctorList: [],
      imageUrl: '',
      addFormTitle: '新增医生',
      addFormVisible: false,
      addForm: {}
    }
  },
  // 注册组件
  components: {
    Pagination
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    let _this = this
    this.getAllDoctor()
    setTimeout(() => {
      _this.updateForm = JSON.parse(JSON.stringify(_this.doctorList[0]))
    }, 500)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    selectUpdateForm: function (event) {
      for(let i = 0; i < this.doctorList.length; i++) {
        if (this.doctorList[i].id === event) {
          this.updateForm = JSON.parse(JSON.stringify(this.doctorList[i]))
        }
      }
    },
    updateFormBtn: function () {
      let _this = this
      let params = new URLSearchParams()
      params.append('id', _this.updateForm.id)
      params.append('name', _this.updateForm.name)
      params.append('phone', _this.updateForm.phone)
      params.append('sex', _this.updateForm.sex)
      params.append('age', _this.updateForm.age)
      params.append('department', _this.updateForm.department)
      params.append('openingtime', _this.updateForm.openingtime)
      params.append('headimg', _this.updateForm.headimg)
      params.append('introduce', _this.updateForm.introduce)
      params.append('goodat', _this.updateForm.goodat)
      params.append('reminder', _this.updateForm.reminder)
      params.append('notice', _this.updateForm.notice)
      params.append('remarks', _this.updateForm.remarks)
      updateDoctor(params)
      .then(res => {
        if (res.result === true) {
          _this.getAllDoctor()
          _this.$message({
            type: 'success',
            message: '更新成功！'
          })
        }
      })
      .catch(err => {
        _this.$message({
          type: 'info',
          message: '更新失败'
        })
      })
    },
    add: function () {
      this.addFormVisible = true
    },
    addFormBtn: function () {
      let _this = this
      let params = new URLSearchParams()
      params.append('name', _this.addForm.name)
      params.append('phone', _this.addForm.phone)
      params.append('sex', _this.addForm.sex)
      params.append('age', _this.addForm.age)
      params.append('department', _this.addForm.department)
      params.append('openingtime', _this.addForm.openingtime)
      params.append('headimg', _this.addForm.headimg)
      params.append('introduce', _this.addForm.introduce)
      params.append('goodat', _this.addForm.goodat)
      params.append('reminder', _this.addForm.reminder)
      params.append('notice', _this.addForm.notice)
      params.append('remarks', _this.addForm.remarks)
      addDoctor(params)
      .then(res => {
        if (res.result) {
          _this.addFormVisible = false
          _this.$notify({
            title: '成功',
            message: '新增成功',
            type: 'success'
          })
          _this.getAllDoctor()
        }
      })
      .catch(err => {
        console.log(err)
      })
    },
    del: function () {
      let _this = this
      this.$confirm('此操作将永久删除'+ _this.updateForm.name +'医生的信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = new URLSearchParams()
        params.append('id', _this.updateForm.id)
        delDoctor(params)
        .then(res => {
          if (res.result) {
            _this.getAllDoctor()
            setTimeout(() => {
              _this.updateForm = JSON.parse(JSON.stringify(_this.doctorList[0]))
            }, 500)
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else {
            this.$message.error('删除失败');
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getAllDoctor: function () {
      let _this = this
      allDoctor()
        .then(res => {
          _this.doctorList = res.result
        })
        .catch(err => {
          console.log(err)
        })
    },
    closeDialog: function () {
      this.addFormVisible = false;
    },
    handleAvatarSuccess(res, file) {
      this.$notify({
        title: '成功',
        message: '头像修改成功',
        type: 'success'
      })
      this.updateForm.headimg = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style scoped>
.elForm >>> .el-form-item__label {
  font-size: 18px;
}
.elForm >>> .el-input {
  font-size: 18px;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.avatar-uploader {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

